/**
 * Checkout Page — e-Potion redesign (hooks-only approach).
 *
 * This stylesheet targets WooCommerce's DEFAULT checkout markup. No template
 * overrides — WC renders form-checkout.php and review-order.php as-is, and
 * we wrap the result with grid containers via add_action hooks.
 *
 * @package Shoptimizer_Child
 * @version 2.1.0
 */

/* ==========================================================================
   0. Hide Shoptimizer's redundant checkout widgets
   ========================================================================== */

/* Progress steps (1/2/3 circles) — duplicates our breadcrumbs.
   Hide every Shoptimizer / CommerceKit / 3rd-party progress bar pattern.
   Our own .ep-checkout-progress is excluded via :not(). */
body.woocommerce-checkout .cs-shop-progress,
body.woocommerce-checkout .shoptimizer-checkout-progress,
body.woocommerce-checkout .shoptimizer-progress-bar,
body.woocommerce-checkout .shoptimizer-progress,
body.woocommerce-checkout .shoptimizer-checkout-steps,
body.woocommerce-checkout .shoptimizer-step-progress,
body.woocommerce-checkout .commercekit-checkout-progress,
body.woocommerce-checkout .commercekit-progress-bar,
body.woocommerce-checkout .cm-checkout-progress,
body.woocommerce-checkout .checkout-progress-bar,
body.woocommerce-checkout .checkout-progress-wrap,
body.woocommerce-checkout .progress-bar-wrap,
body.woocommerce-checkout ul.checkout-progress,
body.woocommerce-checkout .checkout-progress,
body.woocommerce-checkout .checkout-steps,
body.woocommerce-checkout .woocommerce-checkout-steps,
body.woocommerce-checkout [class*="checkout-progress"]:not(.ep-checkout-progress):not([class*="ep-checkout-progress"]),
body.woocommerce-checkout [class*="progress-steps"]:not(.ep-checkout-progress):not([class*="ep-checkout-progress"]),
body.woocommerce-checkout [class*="checkout-step"]:not(.ep-checkout-progress):not([class*="ep-checkout-progress"]):not(.shop_table):not(.cart_item) {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Sidebar feature widgets — "Livrare gratuita 24h", "Garantie 60 zile",
   "Adauga o recenzie", and the 4 colored circular trust badges */
body.woocommerce-checkout .shoptimizer-checkout-features,
body.woocommerce-checkout .shoptimizer-trust-symbols,
body.woocommerce-checkout .shoptimizer-trust,
body.woocommerce-checkout .shoptimizer-payment-features,
body.woocommerce-checkout .shoptimizer-checkout-info,
body.woocommerce-checkout .shoptimizer-checkout-info-area,
body.woocommerce-checkout .commercekit-trust-symbols,
body.woocommerce-checkout .commercekit-trust-marks,
body.woocommerce-checkout .commercekit-trustmarks,
body.woocommerce-checkout .commercekit-trust,
body.woocommerce-checkout .checkout-features,
body.woocommerce-checkout .checkout-trust,
body.woocommerce-checkout .checkout-trust-symbols,
body.woocommerce-checkout .checkout-trust-marks,
body.woocommerce-checkout .checkout-trust-badges {
	display: none !important;
}

/* Shoptimizer's payment-icons IMAGE strip (duplicates our 4-icon row) —
   target only inside the sidebar so we don't kill our own .ep-pay-icon row */
.ep-checkout-page__sidebar .shoptimizer-payment-icons,
.ep-checkout-page__sidebar .shoptimizer-checkout-icons,
.ep-checkout-page__sidebar .commercekit-payment-icons,
.ep-checkout-page__sidebar .checkout-payment-icons,
.ep-checkout-page__sidebar img[src*="payment-icons"],
.ep-checkout-page__sidebar img[src*="payment_icons"] {
	display: none !important;
}

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

.ep-checkout-page {
	--ep-bg-page: #ffffff;
	--ep-bg-surface: #fafafa;
	--ep-bg-muted: #f6f7f9;
	--ep-bg-dark: #0e1116;

	--ep-border-subtle: #f0f0f2;
	--ep-border-default: #e5e7eb;
	--ep-border-strong: #0e1116;

	--ep-text-primary: #0e1116;
	--ep-text-secondary: #4a5058;
	--ep-text-muted: #6b7280;
	--ep-text-disabled: #9ca3af;

	--ep-accent-soft: #fff3eb;
	--ep-accent: #ff6b1a;
	--ep-accent-dark: #d44a00;

	--ep-success: #10b981;
	--ep-success-soft: #d1fae5;
	--ep-danger: #ef4444;

	--ep-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ep-container-max: 1200px;
}

/* ==========================================================================
   1. Page wrapper + header
   ========================================================================== */

.ep-checkout-page {
	font-family: var(--ep-font-sans);
	color: var(--ep-text-primary);
	max-width: 1050px;
	margin: 0 auto;
	padding: 0 16px 30px;
}

.ep-checkout-page__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 16px;
	flex-wrap: wrap;
}

.ep-checkout-page__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--ep-text-primary);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* Numbered progress bar at top of checkout page — 3 steps with circles +
   connecting lines. Centered inside the 1050px container so it aligns with
   the form grid below. Body parent + !important to beat any Shoptimizer
   overrides on nav elements or .woocommerce-page descendants. */
body.woocommerce-checkout .ep-checkout-progress,
.ep-checkout-page .ep-checkout-progress {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	margin: 0 0 16px !important;
	padding: 14px 20px !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid var(--ep-border-default) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba( 14, 17, 22, 0.04 ) !important;
	font-family: var(--ep-font-sans);
	box-sizing: border-box;
	width: 100%;
	list-style: none;
}

body.woocommerce-checkout .ep-checkout-progress__step,
.ep-checkout-page .ep-checkout-progress__step {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	color: var(--ep-text-muted);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.15s ease;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}

body.woocommerce-checkout a.ep-checkout-progress__step:hover,
.ep-checkout-page a.ep-checkout-progress__step:hover {
	color: var(--ep-text-primary) !important;
}

body.woocommerce-checkout a.ep-checkout-progress__step:hover .ep-checkout-progress__circle,
.ep-checkout-page a.ep-checkout-progress__step:hover .ep-checkout-progress__circle {
	transform: scale( 1.05 );
}

body.woocommerce-checkout .ep-checkout-progress__circle,
.ep-checkout-page .ep-checkout-progress__circle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: var(--ep-text-muted) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border: 2px solid var(--ep-border-default) !important;
	flex-shrink: 0 !important;
	transition: all 0.2s ease;
	box-sizing: border-box;
	line-height: 1;
}

.ep-checkout-progress__circle svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

/* Labels: Shoptimizer's parent CSS has rules that hide or clip <span>
   elements inside nav/anchor contexts (often for accessibility "screen
   reader only" patterns: text-indent:-9999px, clip:rect(0,0,0,0)).
   We force the label visible against every common hiding technique. */
body.woocommerce-checkout .ep-checkout-progress__label,
.ep-checkout-page .ep-checkout-progress__label {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	overflow: visible !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: inherit !important;
	background: transparent !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Done step: green check */
body.woocommerce-checkout .ep-checkout-progress__step--done,
.ep-checkout-page .ep-checkout-progress__step--done {
	color: #065f46 !important;
}

body.woocommerce-checkout .ep-checkout-progress__step--done .ep-checkout-progress__circle,
.ep-checkout-page .ep-checkout-progress__step--done .ep-checkout-progress__circle {
	background: var(--ep-success) !important;
	border-color: var(--ep-success) !important;
	color: #ffffff !important;
}

/* Active step: dark filled circle */
body.woocommerce-checkout .ep-checkout-progress__step--active,
.ep-checkout-page .ep-checkout-progress__step--active {
	color: var(--ep-text-primary) !important;
}

body.woocommerce-checkout .ep-checkout-progress__step--active .ep-checkout-progress__circle,
.ep-checkout-page .ep-checkout-progress__step--active .ep-checkout-progress__circle {
	background: var(--ep-text-primary) !important;
	border-color: var(--ep-text-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba( 14, 17, 22, 0.07 );
}

/* Future step: muted */
body.woocommerce-checkout .ep-checkout-progress__step--future,
.ep-checkout-page .ep-checkout-progress__step--future {
	color: var(--ep-text-disabled) !important;
}

/* Connecting line between steps */
body.woocommerce-checkout .ep-checkout-progress__line,
.ep-checkout-page .ep-checkout-progress__line {
	display: inline-block !important;
	flex: 1 1 auto !important;
	height: 2px !important;
	background: var(--ep-border-default) !important;
	min-width: 30px !important;
	max-width: 140px !important;
	margin: 0 14px !important;
	border-radius: 1px;
	align-self: center;
}

body.woocommerce-checkout .ep-checkout-progress__line--done,
.ep-checkout-page .ep-checkout-progress__line--done {
	background: var(--ep-success) !important;
}

.ep-checkout-guest-hint {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--ep-text-muted);
	white-space: nowrap;
}

.ep-checkout-guest-hint__icon {
	color: var(--ep-success);
	font-weight: 700;
}

.ep-checkout-guest-hint__sep {
	color: #d1d5db;
	margin: 0 2px;
}

.ep-checkout-guest-hint__login {
	color: var(--ep-text-primary);
	text-decoration: underline;
	font-weight: 500;
}

.ep-checkout-guest-hint__login:hover {
	color: var(--ep-accent-dark);
}

/* ==========================================================================
   2. Free shipping bar
   ========================================================================== */

/* Free shipping progress bar — mirrors cart-page.css .ep-shipping-bar so
   checkout and cart look identical. Same class name, same internal structure.
   Includes truck icon, text, full-width progress fill, and % indicator. */
.ep-shipping-bar {
	background: var(--ep-accent-soft);
	border: 1px solid #ffe2cf;
	border-radius: 10px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	color: var(--ep-accent-dark);
}

.ep-shipping-bar--achieved {
	background: var(--ep-success-soft);
	border-color: rgba( 16, 185, 129, 0.2 );
	color: #065f46;
}

.ep-shipping-bar__icon {
	display: flex;
	flex-shrink: 0;
}

.ep-shipping-bar__icon svg {
	width: 22px;
	height: 22px;
}

.ep-shipping-bar__content {
	flex: 1;
	min-width: 0;
}

.ep-shipping-bar__text {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.ep-shipping-bar__amount {
	font-weight: 700;
}

.ep-shipping-bar__amount .amount,
.ep-shipping-bar__amount bdi {
	color: inherit;
	font-weight: inherit;
	white-space: nowrap;
}

.ep-shipping-bar__track {
	height: 5px;
	background: rgba( 255, 255, 255, 0.6 );
	border-radius: 3px;
	margin-top: 6px;
	overflow: hidden;
}

.ep-shipping-bar__fill {
	height: 100%;
	background: var(--ep-accent);
	border-radius: 3px;
	transition: width 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ep-shipping-bar__percent {
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	min-width: 32px;
	text-align: right;
}

/* ==========================================================================
   3. Layout grid — wraps WC's customer-details + order-review
   ========================================================================== */

/* Defensive resets — Shoptimizer (parent) ships default widths/floats on
   form.checkout and the order-review elements. Same pattern as cart-page.css
   reset for .woocommerce-cart-form. Without these, any of these elements
   could collapse to a percentage width and break our grid math (especially
   after AJAX update_checkout re-renders #order_review). */
.ep-checkout-page form.checkout,
.ep-checkout-page form.woocommerce-checkout,
body.woocommerce-checkout .ep-checkout-page form.checkout {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
	box-sizing: border-box;
}

.ep-checkout-page__sidebar #order_review,
.ep-checkout-page__sidebar .woocommerce-checkout-review-order {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.ep-checkout-page__main #customer_details,
.ep-checkout-page__main .col2-set {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

.ep-checkout-page__grid {
	display: grid !important;
	/* Match cart-page: 580 main + 460 sidebar = 1040 + 10 gap = 1050 outer.
	   Same widths as .ep-cart-outer-block__grid for visual consistency. */
	grid-template-columns: 580px 460px !important;
	gap: 10px !important;
	align-items: start;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
}

.ep-checkout-page__main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100%;
	box-sizing: border-box;
}

.ep-checkout-page__sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	top: 14px;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100%;
	box-sizing: border-box;
}

/* Prevent Shoptimizer's float/width rules from leaking in */
.ep-checkout-page__grid > * {
	float: none !important;
}

/* WC notices above the form (login prompt, coupon) — keep them above the grid */
.ep-checkout-page > .woocommerce-info,
.ep-checkout-page > form.checkout_coupon,
.ep-checkout-page > form.woocommerce-form-login {
	margin-bottom: 14px;
}

/* ==========================================================================
   4. Customer-details — flatten WC's default 2-col into a stacked card layout
   ========================================================================== */

/* WC default markup:
   <div class="col2-set" id="customer_details">
     <div class="col-1"><!-- billing --></div>
     <div class="col-2"><!-- shipping --></div>
   </div>
   We flatten this to stacked single column so each section becomes its own card. */
.ep-checkout-page__main .col2-set,
.ep-checkout-page__main #customer_details {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.ep-checkout-page__main .col2-set .col-1,
.ep-checkout-page__main .col2-set .col-2 {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	padding: 0;
	margin: 0;
}

/* Hide WC's default <h3>Billing details</h3> / <h3>Shipping details</h3> —
   our .ep-section labels replace them. */
.ep-checkout-page__main .woocommerce-billing-fields > h3,
.ep-checkout-page__main .woocommerce-shipping-fields > h3:not(#ship-to-different-address),
.ep-checkout-page__main .woocommerce-additional-fields > h3 {
	display: none;
}

/* Section grouping cards (used by form-billing.php override + JS regrouping) */
.ep-checkout-page__main .ep-section {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 12px;
	padding: 18px 18px 16px;
	margin: 0 0 12px;
}

.ep-checkout-page__main .ep-section:last-child {
	margin-bottom: 0;
}

.ep-checkout-page__main .ep-section__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--ep-text-disabled);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin: 0 0 14px;
	line-height: 1.3;
}

.ep-checkout-page__main .ep-section__fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* B2B section — when toggle is on, highlight the panel with warm yellow */
.ep-checkout-page__main .ep-section--invoice {
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ep-checkout-page__main .ep-section--invoice.is-b2b-active {
	background: #fffbf3;
	border-color: #f5c97a;
}

/* B2B toggle row — visually distinct from other fields */
.ep-checkout-page__main .ep-b2b-toggle {
	background: var(--ep-bg-surface);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0;
}

.ep-checkout-page__main .ep-b2b-toggle label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ep-text-primary);
	margin: 0;
	cursor: pointer;
}

.ep-checkout-page__main .ep-b2b-toggle input[type="checkbox"] {
	margin: 0;
	accent-color: var(--ep-text-primary);
	flex-shrink: 0;
}

/* B2B fields — hidden by default, shown by JS when toggle is checked */
.ep-checkout-page__main .ep-b2b-field {
	display: none;
}

.ep-checkout-page__main .ep-b2b-field.is-visible {
	display: block;
}

/* Each fields wrapper becomes a card (still works for shipping/additional
   when those use WC default markup) */
.ep-checkout-page__main .woocommerce-shipping-fields,
.ep-checkout-page__main .woocommerce-additional-fields {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 12px;
	padding: 16px;
	margin: 0;
}

/* ==========================================================================
   5. Form fields — target WC's default .form-row markup
   ========================================================================== */

.ep-checkout-page .form-row {
	margin: 0 0 10px;
	padding: 0;
	clear: both;
}

.ep-checkout-page .form-row:last-child {
	margin-bottom: 0;
}

.ep-checkout-page .form-row label {
	display: block;
	font-size: 11px;
	color: var(--ep-text-muted);
	font-weight: 500;
	margin-bottom: 3px;
}

.ep-checkout-page .form-row label .required {
	color: var(--ep-accent-dark);
	margin-left: 2px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
}

.ep-checkout-page .form-row label .optional {
	color: var(--ep-text-disabled);
	margin-left: 4px;
	font-weight: 400;
	font-size: 10px;
}

.ep-checkout-page .form-row input[type="text"],
.ep-checkout-page .form-row input[type="email"],
.ep-checkout-page .form-row input[type="tel"],
.ep-checkout-page .form-row input[type="number"],
.ep-checkout-page .form-row input[type="password"],
.ep-checkout-page .form-row textarea,
.ep-checkout-page .form-row select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 500;
	color: var(--ep-text-primary);
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
	padding: 11px 12px;
	background: var(--ep-bg-page);
	font-family: inherit;
	min-height: 44px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ep-checkout-page .form-row textarea {
	min-height: 64px;
	resize: vertical;
	line-height: 1.5;
}

.ep-checkout-page .form-row input:focus,
.ep-checkout-page .form-row textarea:focus,
.ep-checkout-page .form-row select:focus {
	border-color: var(--ep-border-strong);
	box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.06);
}

.ep-checkout-page .form-row.woocommerce-invalid input,
.ep-checkout-page .form-row.woocommerce-invalid textarea,
.ep-checkout-page .form-row.woocommerce-invalid select {
	border-color: var(--ep-danger);
}

.ep-checkout-page .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* Side-by-side form rows (WC's _wide / _first / _last classes) */
.ep-checkout-page .form-row-first,
.ep-checkout-page .form-row-last {
	width: calc(50% - 5px);
	float: left;
}

.ep-checkout-page .form-row-first {
	margin-right: 10px;
}

.ep-checkout-page .form-row::after {
	content: '';
	display: table;
	clear: both;
}

/* Select2 dropdown */
.ep-checkout-page .select2-container--default .select2-selection--single {
	height: 44px;
	padding: 0;
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
}

.ep-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ep-text-primary);
	line-height: 42px;
	padding-left: 12px;
	padding-right: 32px;
	font-weight: 500;
	font-size: 14px;
}

.ep-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
	right: 8px;
}

/* "Ship to a different address" toggle */
.ep-checkout-page__main .woocommerce-shipping-fields h3#ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin: 0;
	cursor: pointer;
}

.ep-checkout-page__main .woocommerce-shipping-fields h3#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ep-text-primary);
	cursor: pointer;
}

.ep-checkout-page__main .woocommerce-shipping-fields h3#ship-to-different-address input[type="checkbox"] {
	margin: 0;
	accent-color: var(--ep-text-primary);
}

/* Order notes field at bottom of additional-fields card */
.ep-checkout-page__main .woocommerce-additional-fields h3 {
	font-size: 12px;
	font-weight: 600;
	color: var(--ep-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* WC notices */
.ep-checkout-page .woocommerce-error,
.ep-checkout-page .woocommerce-message,
.ep-checkout-page .woocommerce-info {
	font-size: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	margin: 0 0 12px;
	list-style: none;
	line-height: 1.5;
}

.ep-checkout-page .woocommerce-error {
	background: #fff3f0;
	color: #a03010;
	border: 1px solid #f5b8a8;
}

.ep-checkout-page .woocommerce-info {
	background: var(--ep-accent-soft);
	color: var(--ep-accent-dark);
	border: 1px solid #ffd4b3;
}

.ep-checkout-page .woocommerce-message {
	background: var(--ep-success-soft);
	color: #065f46;
	border: 1px solid #6ee7b7;
}

/* ==========================================================================
   6. Right column — order review (works with default OR our custom review-order.php)
   ========================================================================== */

/* Hide WC's default "Your order" heading — our header card already shows it */
.ep-checkout-page__sidebar #order_review_heading {
	display: none;
}

/* If our custom review-order.php is in place, .ep-summary--checkout exists */
.ep-summary--checkout {
	background: var(--ep-bg-page);
	border: 1.5px solid var(--ep-border-strong);
	border-radius: 12px;
	padding: 16px;
}

/* Fix for "2 photos per item" bug.
   Plugins (CommerceKit cross-sells, Shoptimizer features, or the
   woocommerce_cart_item_name filter wrapping the name in <a><img>) can
   inject extra product images into #order_review. We hide every <img>
   inside #order_review by default, then explicitly allow only our
   .ep-summary__item-thumb img. This is defensive — it works regardless
   of where the rogue image is coming from. */
.ep-checkout-page__sidebar #order_review img {
	display: none !important;
}

.ep-checkout-page__sidebar #order_review .ep-summary__item-thumb img {
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	border-radius: 6px;
	border: 1px solid var(--ep-border-subtle);
	object-fit: cover;
}

/* Fallback: style WC's DEFAULT shop_table review-order if our custom
   review-order.php isn't deployed. Renders inside #order_review. */
.ep-checkout-page__sidebar #order_review {
	background: var(--ep-bg-page);
	border: 1.5px solid var(--ep-border-strong);
	border-radius: 12px;
	padding: 14px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.ep-checkout-page__sidebar .shop_table.woocommerce-checkout-review-order-table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed;
	border: 0;
	margin: 0;
	font-size: 12px;
	border-collapse: collapse;
}

.ep-checkout-page__sidebar .shop_table thead {
	display: none;
}

.ep-checkout-page__sidebar .shop_table tr {
	border: 0;
}

.ep-checkout-page__sidebar .shop_table th,
.ep-checkout-page__sidebar .shop_table td {
	padding: 6px 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 12px;
	line-height: 1.4;
	vertical-align: top;
	color: var(--ep-text-secondary);
	word-break: normal !important;
	overflow-wrap: break-word;
}

.ep-checkout-page__sidebar .shop_table .product-name {
	color: var(--ep-text-primary);
	font-weight: 600;
	width: 65%;
}

.ep-checkout-page__sidebar .shop_table .product-total {
	color: var(--ep-text-primary);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
	width: 35%;
}

.ep-checkout-page__sidebar .shop_table tbody tr {
	border-bottom: 1px solid var(--ep-border-subtle);
}

.ep-checkout-page__sidebar .shop_table tbody tr:last-child {
	border-bottom: 0;
}

.ep-checkout-page__sidebar .shop_table tfoot tr {
	border-top: 1px solid var(--ep-border-subtle);
}

.ep-checkout-page__sidebar .shop_table tfoot tr th {
	color: var(--ep-text-secondary);
	font-weight: 400;
}

.ep-checkout-page__sidebar .shop_table tfoot .order-total th,
.ep-checkout-page__sidebar .shop_table tfoot .order-total td {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ep-text-primary) !important;
	padding-top: 10px !important;
	border-top: 2px solid var(--ep-text-primary) !important;
}

.ep-checkout-page__sidebar .shop_table tfoot .order-total .amount {
	font-size: 18px;
}

.ep-summary--checkout .ep-summary__label {
	font-size: 10px;
	font-weight: 600;
	color: var(--ep-text-disabled);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ep-summary__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ep-border-subtle);
	/* Cap to ~4 items visible, scroll the rest. Each item ≈ 55px + 10px gap. */
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
	/* Reserve a sliver so the scrollbar doesn't overlap the × buttons */
	padding-right: 4px;
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--ep-border-default) transparent;
}

/* WebKit scrollbar */
.ep-summary__items::-webkit-scrollbar {
	width: 5px;
}

.ep-summary__items::-webkit-scrollbar-track {
	background: transparent;
}

.ep-summary__items::-webkit-scrollbar-thumb {
	background: var(--ep-border-default);
	border-radius: 3px;
}

.ep-summary__items::-webkit-scrollbar-thumb:hover {
	background: var(--ep-text-muted);
}

.ep-summary__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.ep-summary__item-thumb {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.ep-summary__item-thumb img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	border: 1px solid var(--ep-border-subtle);
	display: block;
	object-fit: cover;
}

.ep-summary__item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--ep-bg-dark);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border: 1.5px solid #fff;
}

.ep-summary__item-body {
	flex: 1;
	min-width: 0;
}

.ep-summary__item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ep-text-primary);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-summary__item-meta {
	font-size: 11px;
	color: var(--ep-text-muted);
	margin-top: 2px;
}

/* Per-item remove × button (AJAX, stays on /checkout/) */
.ep-summary__item-remove {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--ep-text-muted);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	margin-left: 4px;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
	cursor: pointer;
	line-height: 1;
}

.ep-summary__item-remove svg {
	width: 12px;
	height: 12px;
	display: block;
}

.ep-summary__item-remove:hover {
	background: #fff3f0;
	color: #a03010;
	border-color: #f5b8a8;
}

.ep-summary__item-remove.is-loading {
	pointer-events: none;
	opacity: 0.5;
}

/* Inline voucher form (after JS moves WC's coupon form next to trigger) */
.ep-voucher-inline {
	margin-top: 8px;
	margin-bottom: 0;
	padding: 10px 12px;
	background: var(--ep-bg-surface);
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
}

.ep-voucher-inline .form-row,
.ep-voucher-inline .form-row-first,
.ep-voucher-inline .form-row-last {
	margin: 0;
	width: 100%;
	float: none;
}

.ep-voucher-inline input[type="text"] {
	width: 100% !important;
	box-sizing: border-box;
	font-size: 13px;
	padding: 9px 11px;
	border: 1px solid var(--ep-border-default);
	border-radius: 6px;
	margin-bottom: 6px;
}

.ep-voucher-inline button,
.ep-voucher-inline input[type="submit"],
.ep-voucher-inline button[name="apply_coupon"] {
	width: 100%;
	background: var(--ep-bg-dark) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 9px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-height: 0 !important;
}

.ep-voucher-inline p {
	margin: 0 0 6px;
	font-size: 11px;
	color: var(--ep-text-muted);
	line-height: 1.4;
}

.ep-voucher-inline p:last-child {
	margin-bottom: 0;
}

.ep-summary__voucher-trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--ep-accent-dark);
	font-weight: 600;
	margin-top: 12px;
	cursor: pointer;
	user-select: none;
}

.ep-summary__voucher-trigger:hover {
	color: var(--ep-accent);
}

.ep-summary__voucher-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: var(--ep-accent-soft);
	color: var(--ep-accent-dark);
	border-radius: 4px;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	font-weight: 700;
}

.ep-summary__lines {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ep-border-subtle);
}

.ep-summary__line {
	display: flex;
	justify-content: space-between;
	color: var(--ep-text-secondary);
}

.ep-summary__line--coupon {
	color: var(--ep-success);
	font-weight: 600;
}

/* Shipping methods — div-based render (replaces WC's cart-shipping.php <tr>) */
.ep-summary__shipping {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 0;
}

.ep-summary__shipping-label {
	font-size: 13px;
	color: var(--ep-text-secondary);
	font-weight: 500;
}

.ep-summary__shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ep-summary__shipping-method {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--ep-text-primary);
	padding: 8px 10px;
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
	cursor: pointer;
	line-height: 1.4;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.ep-summary__shipping-method:hover {
	border-color: var(--ep-text-secondary);
}

.ep-summary__shipping-method.is-selected,
.ep-summary__shipping-method:has(input:checked) {
	border-color: var(--ep-text-primary);
	border-width: 1.5px;
	background: var(--ep-bg-surface);
	padding: 7.5px 9.5px;
}

.ep-summary__shipping-method input[type="radio"] {
	margin: 0;
	accent-color: var(--ep-text-primary);
	flex-shrink: 0;
}

.ep-summary__shipping-method-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--ep-bg-surface);
	border-radius: 6px;
	color: var(--ep-text-primary);
}

.ep-summary__shipping-method.is-selected .ep-summary__shipping-method-icon,
.ep-summary__shipping-method:has(input:checked) .ep-summary__shipping-method-icon {
	background: #eef0f3;
	color: var(--ep-text-primary);
}

.ep-summary__shipping-method-icon svg {
	width: 16px;
	height: 16px;
}

.ep-summary__shipping-method-text {
	flex: 1;
	min-width: 0;
}

.ep-summary__shipping-method-text .amount,
.ep-summary__shipping-method-text bdi {
	color: var(--ep-text-primary);
	font-weight: 600;
	white-space: nowrap;
}

.ep-summary__shipping-empty {
	font-size: 11px;
	color: var(--ep-text-muted);
	margin: 0;
	padding: 6px 0;
	font-style: italic;
}

.ep-summary__divider {
	height: 0;
	border-top: 2px solid var(--ep-text-primary);
	margin: 12px 0;
}

.ep-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 14px;
	gap: 12px;
}

.ep-summary__total-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--ep-text-primary);
	padding-top: 2px;
}

.ep-summary__total-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
}

.ep-summary__total-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--ep-text-primary);
	line-height: 1.1;
	white-space: nowrap;
}

.ep-summary__total-tax-note {
	font-size: 10px;
	color: var(--ep-text-muted);
	font-weight: 400;
	letter-spacing: 0.2px;
}

/* ==========================================================================
   7. Payment block — WC's default #payment markup
   ========================================================================== */

.ep-checkout-page__sidebar #payment {
	background: transparent;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
}

.ep-checkout-page__sidebar #payment .wc_payment_methods {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ep-checkout-page__sidebar #payment .wc_payment_method {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0;
	list-style: none;
}

.ep-checkout-page__sidebar #payment .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ep-text-primary);
	cursor: pointer;
	margin: 0;
	line-height: 1.4;
}

.ep-checkout-page__sidebar #payment .wc_payment_method input[type="radio"] {
	margin: 0;
	accent-color: var(--ep-text-primary);
	flex-shrink: 0;
}

/* Payment method SVG icons. Injected via ::before so they work with any
   WC gateway without touching the gateway plugin. DEFAULT is the card icon
   (covers "Plata online", Euplatesc, Stripe, Paylike, Smart2Pay, MobilPay,
   and any custom Romanian online gateway without needing a specific class
   match). Cash/bank gateways are overridden below by their specific class. */
.ep-checkout-page__sidebar #payment .wc_payment_method > label::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background-color: var(--ep-bg-surface);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border-radius: 6px;
	margin-right: 2px;
	transition: background-color 0.12s ease;
	/* Default: card icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}

/* Cash icon (COD / Ramburs la curier) — banknote with circle SVG */
.ep-checkout-page__sidebar #payment .payment_method_cod > label::before,
.ep-checkout-page__sidebar #payment .payment_method_ramburs > label::before,
.ep-checkout-page__sidebar #payment [class*="payment_method_"][class*="cod"] > label::before,
.ep-checkout-page__sidebar #payment [class*="payment_method_"][class*="cash"] > label::before,
.ep-checkout-page__sidebar #payment [class*="payment_method_"][class*="ramburs"] > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}

/* Bank transfer icon */
.ep-checkout-page__sidebar #payment .payment_method_bacs > label::before,
.ep-checkout-page__sidebar #payment [class*="payment_method_"][class*="bank"] > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10'/%3E%3Cpath d='M19 21V10'/%3E%3Cpath d='M9 21V10'/%3E%3Cpath d='M15 21V10'/%3E%3Cpath d='M2 10l10-7 10 7'/%3E%3C/svg%3E");
}

/* Selected payment method: keep icon neutral (NOT orange). Show selection
   via the radio button + a stronger border on the row instead. */
.ep-checkout-page__sidebar #payment .wc_payment_method:has(input:checked) {
	border-color: var(--ep-text-primary);
	border-width: 1.5px;
	padding: 9.5px 11.5px;
}

.ep-checkout-page__sidebar #payment .wc_payment_method:has(input:checked) > label::before {
	background-color: #eef0f3;
}

.ep-checkout-page__sidebar #payment .wc_payment_method img {
	max-height: 18px;
	width: auto;
	margin-left: auto;
}

.ep-checkout-page__sidebar #payment .payment_box {
	font-size: 11px;
	color: var(--ep-text-muted);
	background: var(--ep-bg-surface);
	padding: 8px 10px;
	border-radius: 6px;
	margin: 8px 0 0;
	line-height: 1.5;
}

.ep-checkout-page__sidebar #payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* Terms checkbox */
.ep-checkout-page__sidebar .woocommerce-terms-and-conditions-wrapper {
	font-size: 11px;
	color: var(--ep-text-secondary);
	background: var(--ep-bg-surface);
	border: 1px solid var(--ep-border-subtle);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 12px 0;
	line-height: 1.5;
}

.ep-checkout-page__sidebar .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin: 1px 6px 0 0;
	accent-color: var(--ep-text-primary);
	flex-shrink: 0;
	vertical-align: text-top;
}

.ep-checkout-page__sidebar .woocommerce-terms-and-conditions-wrapper a {
	color: var(--ep-text-primary);
	text-decoration: underline;
	font-weight: 600;
}

/* Place-order button — WC default markup is <button id="place_order"> */
.ep-checkout-page__sidebar #payment .form-row.place-order {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both;
	box-sizing: border-box;
}

.ep-checkout-page__sidebar #place_order,
.ep-checkout-page__sidebar .form-row.place-order .button {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background: var(--ep-bg-dark) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 14px 12px !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer;
	margin: 0;
	transition: background 0.15s ease;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-height: 50px;
	line-height: 1.3 !important;
	text-align: center !important;
	white-space: nowrap !important;
	word-break: keep-all !important;
	word-wrap: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	float: none !important;
}

.ep-checkout-page__sidebar #place_order:hover {
	background: #1f2229 !important;
}

.ep-checkout-page__sidebar #place_order:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Trust strip below button (injected via PHP hook) */
.ep-summary__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11px;
	color: var(--ep-text-muted);
	margin-top: 10px;
}

.ep-summary__secure svg {
	width: 12px;
	height: 12px;
	color: var(--ep-success);
	flex-shrink: 0;
}

.ep-summary__payments-icons {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 10px;
}

/* Payment icon pills (from cart-page.css conventions) */
.ep-pay-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 22px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	flex-shrink: 0;
}

.ep-pay-icon--visa { background: #1a1f71; color: #fff; }
.ep-pay-icon--mc { background: #fff; border: 1px solid var(--ep-border-default); gap: 0; }
.ep-pay-icon__mc-red { width: 11px; height: 11px; background: #eb001b; border-radius: 50%; display: inline-block; margin-right: -3px; }
.ep-pay-icon__mc-yellow { width: 11px; height: 11px; background: #f79e1b; border-radius: 50%; display: inline-block; opacity: 0.85; }
.ep-pay-icon--apple { background: #000; color: #fff; border: 1px solid #000; gap: 2px; padding: 0 3px; }
.ep-pay-icon--apple svg { width: 11px; height: 11px; display: block; }
.ep-pay-icon--apple span { font-size: 10px; font-weight: 600; letter-spacing: 0; }
.ep-pay-icon--gpay { background: #fff; border: 1px solid var(--ep-border-default); color: #3c4043; gap: 2px; padding: 0 3px; }
.ep-pay-icon--gpay svg { width: 12px; height: 12px; display: block; }
.ep-pay-icon--gpay span { font-size: 10px; font-weight: 600; letter-spacing: 0; color: #3c4043; }

/* ==========================================================================
   8. Responsive — mobile stacks the columns
   ========================================================================== */

@media (max-width: 767.98px) {
	.ep-checkout-page__grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	.ep-checkout-page__sidebar {
		position: static;
		order: 2;
	}

	.ep-checkout-page__main {
		order: 1;
	}

	.ep-checkout-page__title {
		font-size: 22px;
	}

	/* Smaller shipping bar on mobile (matches cart-page.css) */
	.ep-shipping-bar {
		padding: 10px 14px;
		gap: 10px;
	}

	.ep-shipping-bar__icon svg {
		width: 18px;
		height: 18px;
	}

	.ep-shipping-bar__text {
		font-size: 12px;
	}

	/* Tighter progress bar on mobile */
	body.woocommerce-checkout .ep-checkout-progress,
	.ep-checkout-page .ep-checkout-progress {
		padding: 10px 12px !important;
		margin-bottom: 12px !important;
	}

	body.woocommerce-checkout .ep-checkout-progress__circle,
	.ep-checkout-page .ep-checkout-progress__circle {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		font-size: 12px !important;
	}

	body.woocommerce-checkout .ep-checkout-progress__step,
	.ep-checkout-page .ep-checkout-progress__step {
		gap: 6px !important;
		font-size: 11px;
	}

	body.woocommerce-checkout .ep-checkout-progress__line,
	.ep-checkout-page .ep-checkout-progress__line {
		min-width: 14px !important;
		margin: 0 6px !important;
	}

	.ep-checkout-page__main .woocommerce-billing-fields,
	.ep-checkout-page__main .woocommerce-shipping-fields,
	.ep-checkout-page__main .woocommerce-additional-fields {
		padding: 14px;
	}

	.ep-summary--checkout {
		padding: 14px;
	}

	.ep-summary__total-value {
		font-size: 18px;
	}

	.ep-checkout-page .form-row-first,
	.ep-checkout-page .form-row-last {
		width: 100%;
		float: none;
	}

	.ep-checkout-page .form-row-first {
		margin-right: 0;
	}

	/* Bigger tap targets on mobile */
	.ep-checkout-page .form-row input,
	.ep-checkout-page .form-row textarea,
	.ep-checkout-page .form-row select {
		font-size: 16px;
		min-height: 46px;
	}
}

/* ==========================================================================
   10. Account section (combined login notice + guest hint)
   Replaces WC's "Returning customer? Click here to login" notice and the
   small header "Comandă fără cont · am cont" hint with one prominent block.
   ========================================================================== */

.ep-checkout-account {
	display: flex;
	align-items: stretch;
	gap: 12px;
	background: var(--ep-bg-page);
	border: 1.5px solid var(--ep-border-default);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 16px;
	font-size: 14px;
}

/* Guest variant: two side-by-side cards (option + login CTA) */
.ep-checkout-account--guest {
	flex-wrap: wrap;
}

.ep-checkout-account__option {
	flex: 1;
	min-width: 220px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
}

.ep-checkout-account__option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #d1fae5;
	color: #065f46;
}

.ep-checkout-account__option-icon svg {
	width: 20px;
	height: 20px;
}

.ep-checkout-account__option-body {
	flex: 1;
	min-width: 0;
}

.ep-checkout-account__option-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ep-text-primary);
	line-height: 1.25;
	margin-bottom: 2px;
}

.ep-checkout-account__option-sub {
	font-size: 12px;
	color: var(--ep-text-muted);
	line-height: 1.35;
}

.ep-checkout-account__login {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--ep-bg-dark);
	color: #fff !important;
	border-radius: 10px;
	text-decoration: none !important;
	flex-shrink: 0;
	transition: background 0.12s ease, transform 0.12s ease;
}

.ep-checkout-account__login:hover {
	background: #1f2229;
	color: #fff !important;
	transform: translateY( -1px );
}

.ep-checkout-account__login-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.ep-checkout-account__login-icon svg {
	width: 20px;
	height: 20px;
}

.ep-checkout-account__login-body {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.ep-checkout-account__login-title {
	font-size: 10px;
	color: rgba( 255, 255, 255, 0.7 );
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 4px;
}

.ep-checkout-account__login-sub {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
}

/* Logged-in variant: avatar + greeting + account link */
.ep-checkout-account--logged-in {
	align-items: center;
}

.ep-checkout-account__avatar {
	width: 42px;
	height: 42px;
	background: #d1fae5;
	color: #065f46;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ep-checkout-account__avatar svg {
	width: 22px;
	height: 22px;
}

.ep-checkout-account__body {
	flex: 1;
	min-width: 0;
}

.ep-checkout-account__greeting {
	font-size: 16px;
	font-weight: 700;
	color: var(--ep-text-primary);
	line-height: 1.2;
	margin-bottom: 2px;
}

.ep-checkout-account__sub {
	font-size: 12px;
	color: var(--ep-text-muted);
	line-height: 1.35;
}

.ep-checkout-account__link {
	color: var(--ep-text-primary) !important;
	text-decoration: underline !important;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
}

.ep-checkout-account__link:hover {
	color: var(--ep-accent-dark) !important;
}

/* Mobile: stack the two cards vertically and make the CTA full-width */
@media ( max-width: 767.98px ) {
	.ep-checkout-account--guest {
		flex-direction: column;
		gap: 10px;
	}
	.ep-checkout-account__login {
		justify-content: center;
		padding: 12px 16px;
	}
	.ep-checkout-account--logged-in {
		flex-wrap: wrap;
	}
	.ep-checkout-account__link {
		margin-left: auto;
	}
}

/* ==========================================================================
   11. Hide WC's redundant notices
   Now that we have an inline voucher trigger and a custom account section,
   hide WC's original "Have a coupon?" notice and any leftover login notice.
   ========================================================================== */

.ep-checkout-page .woocommerce-info:has( .showcoupon ),
.ep-checkout-page .woocommerce-info:has( .showlogin ),
.ep-checkout-page .woocommerce-form-login-toggle {
	display: none !important;
}

/* ==========================================================================
   12. Tablet breakpoint (768-1023.98px) — 1050px desktop grid doesn't fit
   ========================================================================== */

@media ( min-width: 768px ) and ( max-width: 1023.98px ) {
	.ep-checkout-page__grid {
		grid-template-columns: minmax(0, 1fr) 360px !important;
		gap: 14px !important;
	}
}

/* ==========================================================================
   13. Payment methods — force-show radio + kill Shoptimizer's orange overlay
   The user reports an orange highlight on the selected payment method. That
   is Shoptimizer's parent CSS (.wc_payment_method.selected_method) overriding
   our rules. We override back with high specificity + !important, and force
   WC's native radio visible (parent themes commonly hide it in favor of
   custom CSS-drawn radios — we want to keep the standard browser radio).
   ========================================================================== */

/* Make the li a flex container so [radio] [label] payment_box reflow nicely.
   payment_box gets flex-basis 100% so the description wraps to its own line. */
.ep-checkout-page__sidebar #payment .wc_payment_method {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	background: var(--ep-bg-page) !important;
	background-image: none !important;
	border: 1px solid var(--ep-border-default) !important;
	box-shadow: none !important;
}

.ep-checkout-page__sidebar #payment .wc_payment_method:hover {
	background: var(--ep-bg-page) !important;
	background-image: none !important;
}

/* SELECTED state: stronger border + neutral gray fill — NO ORANGE.
   Overrides Shoptimizer's .selected_method background and our own prior
   accent-soft attempt. */
.ep-checkout-page__sidebar #payment .wc_payment_method.selected_method,
.ep-checkout-page__sidebar #payment .wc_payment_method:has( input:checked ) {
	background: #fafafa !important;
	background-image: none !important;
	border-color: var(--ep-text-primary) !important;
	border-width: 1.5px !important;
	padding: 9.5px 11.5px !important;
}

/* Force WC's native radio visible. Shoptimizer hides it with very specific
   selectors (often `body.woocommerce-page #payment input[type="radio"]` with
   display:none or position:absolute;left:-9999px). We win this fight by:
   1) `all: revert !important` — nuke EVERY inherited property back to UA default
   2) Maximum specificity selector chain (html body + ul + li)
   3) Explicit replay of just the styles we need on top of revert
   This is the same pattern used for the shipping section radios. */
html body.woocommerce-checkout .ep-checkout-page__sidebar #payment ul.payment_methods li.wc_payment_method > input[type="radio"],
.ep-checkout-page__sidebar #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	all: revert !important;
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	clip: auto !important;
	clip-path: none !important;
	transform: none !important;
	accent-color: var(--ep-text-primary) !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	background: initial !important;
	border: initial !important;
}

/* Label takes remaining horizontal space (after the radio) */
.ep-checkout-page__sidebar #payment .wc_payment_method > label {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}

/* payment_box (the description below) wraps to its own full-width row */
.ep-checkout-page__sidebar #payment .wc_payment_method > .payment_box {
	flex-basis: 100% !important;
	margin-top: 8px !important;
}

/* Kill any orange highlight on the icon background — selected or not.
   This BEATS my earlier #eef0f3 attempt and Shoptimizer's overrides. */
.ep-checkout-page__sidebar #payment .wc_payment_method > label::before,
.ep-checkout-page__sidebar #payment .wc_payment_method.selected_method > label::before,
.ep-checkout-page__sidebar #payment .wc_payment_method:has( input:checked ) > label::before {
	background-color: #f6f7f9 !important;
}

/* Some Shoptimizer/WC themes color the label text orange when selected.
   Force it back to primary text color. */
.ep-checkout-page__sidebar #payment .wc_payment_method.selected_method > label,
.ep-checkout-page__sidebar #payment .wc_payment_method:has( input:checked ) > label {
	color: var(--ep-text-primary) !important;
}

/* And in case Shoptimizer adds a colored ::after arrow or check */
.ep-checkout-page__sidebar #payment .wc_payment_method.selected_method > label::after {
	display: none !important;
}

/* Kill any CSS-drawn fake radios Shoptimizer puts on the li::before/::after
   or label::after. We use our own native radio (above) — these fake circles
   are pure clutter and may also paint orange. */
.ep-checkout-page__sidebar #payment .wc_payment_method::before,
.ep-checkout-page__sidebar #payment .wc_payment_method::after,
.ep-checkout-page__sidebar #payment .wc_payment_method > label::after {
	display: none !important;
	content: none !important;
}