/**
 * E-Z KLEEN — Cart & Checkout styling + stepped (verify-first) checkout.
 * Scoped to WooCommerce cart/checkout so the rest of the theme is untouched.
 * Purely cosmetic + progressive-disclosure; if the JS never runs, nothing is
 * hidden and checkout works normally (fail-open).
 * Brand colours sampled from the live theme (#2f7556 green, #1b3d3c deep).
 */

:root {
	--ez-green: #2f7556;
	--ez-green-d: #245c43;
	--ez-deep: #1b3d3c;
	--ez-soft: #eef5f1;
	--ez-soft2: #f6faf8;
	--ez-line: #d7e6de;
	--ez-ink: #1c2b23;
	--ez-mut: #64766c;
	--ez-amber: #b26a00;
	--ez-radius: 14px;
	--ez-shadow: 0 6px 22px rgba(27, 61, 60, .08);
	--ez-shadow-sm: 0 2px 8px rgba(27, 61, 60, .06);
}

/* ---------------------------------------------------------------------------
 * Shared card look
 * ------------------------------------------------------------------------- */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart table.shop_table,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: #fff;
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius);
	box-shadow: var(--ez-shadow);
}

/* Brand buttons */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce #place_order,
.woocommerce-cart .checkout-button {
	background: var(--ez-green) !important;
	border: none !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: .3px;
	padding: 12px 22px !important;
	transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
	box-shadow: 0 3px 10px rgba(47, 117, 86, .28);
}
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .checkout-button:hover {
	background: var(--ez-green-d) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(47, 117, 86, .32);
}
.woocommerce #place_order:disabled,
.woocommerce #place_order[disabled] {
	background: #a7c3b6 !important;
	box-shadow: none !important;
	cursor: not-allowed;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Page headings
 * ------------------------------------------------------------------------- */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	color: var(--ez-deep);
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 24px;
}
.woocommerce-cart .entry-title::after,
.woocommerce-checkout .entry-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 64px; height: 4px; border-radius: 4px;
	background: var(--ez-green);
}

/* ---------------------------------------------------------------------------
 * CART page
 * ------------------------------------------------------------------------- */
.woocommerce-cart table.shop_table {
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce-cart table.shop_table thead th {
	background: var(--ez-soft);
	color: var(--ez-deep);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .6px;
	padding: 15px 14px;
	border: none;
}
.woocommerce-cart table.shop_table td {
	padding: 18px 14px;
	vertical-align: middle;
	border-top: 1px solid var(--ez-soft);
}
.woocommerce-cart table.shop_table img { border-radius: 10px; border: 1px solid var(--ez-line); }
.woocommerce-cart table.shop_table a.remove {
	color: var(--ez-green-d) !important;
	border: 1px solid var(--ez-line);
	background: #fff;
	line-height: 22px; height: 24px; width: 24px;
}
.woocommerce-cart table.shop_table a.remove:hover { background: var(--ez-green) !important; color: #fff !important; border-color: var(--ez-green); }
.woocommerce-cart .cart_totals h2 {
	color: var(--ez-deep);
	border-bottom: 1px solid var(--ez-line);
	padding: 16px 20px 12px;
	margin: 0;
	font-size: 18px;
}
.woocommerce-cart .cart_totals table { margin: 0; padding: 8px 20px 16px; border: none; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { border-top: 1px solid var(--ez-soft); padding: 12px 0; }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--ez-green-d); font-size: 1.3em; font-weight: 700; }
.woocommerce-cart .coupon .input-text {
	border-radius: 999px !important;
	border: 1.5px solid var(--ez-line) !important;
	padding: 11px 18px !important;
	min-height: 46px;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 20px 20px; }
.woocommerce-cart .checkout-button { display: block; text-align: center; padding: 15px !important; font-size: 15px !important; }

/* ---------------------------------------------------------------------------
 * CHECKOUT — sections
 * ------------------------------------------------------------------------- */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { padding: 24px 26px; }
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	color: var(--ez-deep);
	font-size: 18px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ez-soft);
	margin-bottom: 18px;
}
.woocommerce-checkout .woocommerce-billing-fields h3 { display: flex; align-items: center; gap: 8px; }

/* Labels + required */
.woocommerce-checkout .form-row label {
	font-weight: 600;
	color: var(--ez-ink);
	font-size: 13.5px;
	margin-bottom: 6px;
	display: inline-block;
}
.woocommerce-checkout .required { color: #c0392b; border: 0; }

/* Inputs & borders — the professional core */
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	border-radius: 10px !important;
	border: 1.5px solid var(--ez-line) !important;
	background: var(--ez-soft2) !important;
	padding: 12px 14px !important;
	min-height: 48px !important;
	font-size: 15px !important;
	color: var(--ez-ink) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-checkout .select2-container .select2-selection--single {
	display: flex; align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 22px; color: var(--ez-ink); padding: 0; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce-checkout .input-text:hover,
.woocommerce-checkout select:hover { border-color: #b9d2c5 !important; }
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--ez-green) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(47, 117, 86, .16) !important;
	outline: none;
}
.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder { color: #9aa8a0; }

/* "Ship to a different address" */
.woocommerce-checkout #ship-to-different-address label {
	color: var(--ez-deep);
	font-size: 18px;
}

/* Coupon toggle + notices */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background: var(--ez-soft) !important;
	border-top: none !important;
	border-left: 4px solid var(--ez-green) !important;
	border-radius: 0 10px 10px 0;
	color: var(--ez-deep);
}
.woocommerce-checkout .woocommerce-info::before { color: var(--ez-green); }

/* Order review table */
.woocommerce-checkout .woocommerce-checkout-review-order { padding: 8px 8px 20px; }
.woocommerce-checkout #order_review_heading { padding: 16px 14px 8px; margin: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin: 0; border: none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	background: var(--ez-soft);
	color: var(--ez-deep);
	text-transform: uppercase; font-size: 12px; letter-spacing: .5px;
	padding: 14px 16px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th { padding: 13px 16px; border-top: 1px solid var(--ez-soft); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--ez-green-d); font-size: 1.2em; font-weight: 700; }

/* ---------------------------------------------------------------------------
 * STEP PROGRESS BAR
 * ------------------------------------------------------------------------- */
.wc-eotp-steps {
	display: flex; align-items: stretch; gap: 10px;
	margin: 0 0 24px; padding: 16px 18px;
	background: #fff; border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius); box-shadow: var(--ez-shadow-sm);
}
.wc-eotp-step { flex: 1 1 0; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; }
.wc-eotp-step .wc-eotp-num {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px;
	background: var(--ez-soft); color: var(--ez-green-d); border: 2px solid var(--ez-line);
}
.wc-eotp-step .wc-eotp-txt { line-height: 1.2; }
.wc-eotp-step .wc-eotp-txt b { display: block; color: var(--ez-ink); font-size: 14px; }
.wc-eotp-step .wc-eotp-txt span { font-size: 12px; color: var(--ez-mut); }
.wc-eotp-step-sep { flex: 0 0 34px; align-self: center; height: 3px; background: var(--ez-line); border-radius: 3px; }
.wc-eotp-step.is-active { background: var(--ez-soft); }
.wc-eotp-step.is-active .wc-eotp-num { background: var(--ez-green); color: #fff; border-color: var(--ez-green); }
.wc-eotp-step.is-done .wc-eotp-num { background: var(--ez-green-d); color: #fff; border-color: var(--ez-green-d); }
.wc-eotp-step.is-done .wc-eotp-num span { visibility: hidden; position: relative; }
.wc-eotp-step.is-done .wc-eotp-num::after { content: "\2713"; position: absolute; }

/* ---------------------------------------------------------------------------
 * VERIFY WIDGET = Step-1 card
 * ------------------------------------------------------------------------- */
.wc-eotp-row {
	background: var(--ez-soft);
	border: 1px solid var(--ez-line);
	border-left: 4px solid var(--ez-green);
	border-radius: 0 12px 12px 0;
	padding: 16px 18px !important;
	margin: 12px 0 6px !important;
}
.wc-eotp-row::before {
	content: "Step 1 \00b7 Verify your email";
	display: block; font-weight: 700; color: var(--ez-deep);
	font-size: 13px; letter-spacing: .3px; margin-bottom: 10px;
}
.wc-eotp-row.is-verified { border-left-color: var(--ez-green-d); background: #e7f4ec; }
.wc-eotp-row.is-verified::before { content: "\2713 Email verified"; color: var(--ez-green-d); }
#wc-eotp-code-input {
	border-radius: 10px !important; border: 1.5px solid var(--ez-line) !important;
	letter-spacing: 5px; font-size: 18px !important; text-align: center; background: #fff !important;
}
.wc-eotp-btn-line button.button, #wc-eotp-send-btn { font-weight: 600; }

/* ---------------------------------------------------------------------------
 * STEP 2 PAYMENT LOCK
 * ------------------------------------------------------------------------- */
.wc-eotp-paylock {
	display: none; align-items: center; gap: 10px;
	margin: 0 0 14px; padding: 14px 16px;
	background: #fff7e6; border: 1px solid #f0d8a8; border-left: 4px solid var(--ez-amber);
	border-radius: 0 10px 10px 0; color: #8a5200; font-weight: 600; font-size: 14px;
}
.wc-eotp-locked .wc-eotp-paylock { display: flex; }
.wc-eotp-paylock .wc-eotp-lock-ic { font-size: 18px; }

/* Lock the payment box AND the PayPal smart-button / card-button wrappers,
   which the ppcp plugin renders in their own containers OUTSIDE #payment
   (#ppc-button-ppcp-gateway, #ppc-button-ppcp-card-button-gateway = the
   "Debit or Credit Card" button). Covering them all means nothing in the
   payment step is clickable until email is verified. */
.wc-eotp-locked #payment,
.wc-eotp-locked [id^="ppc-button-ppcp"],
.wc-eotp-locked #ppcp-hosted-fields,
.wc-eotp-locked .ppcp-messages {
	position: relative !important;
	opacity: .5 !important;
	filter: grayscale(.3);
	pointer-events: none !important;
	user-select: none;
}
.wc-eotp-locked #payment::after,
.wc-eotp-locked [id^="ppc-button-ppcp"]::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--ez-radius);
	background: repeating-linear-gradient(45deg, rgba(27,61,60,.02) 0 10px, rgba(27,61,60,.05) 10px 20px);
}

/* Payment box polish */
.woocommerce-checkout #payment {
	background: #fff !important; border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius); padding: 6px 6px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--ez-soft) !important; padding: 12px 16px !important; margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 4px 0; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 16px !important; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { padding: 6px 4px; }

/* Responsive */
@media (max-width: 600px) {
	.wc-eotp-steps { flex-direction: column; gap: 8px; }
	.wc-eotp-step-sep { display: none; }
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 { padding: 18px; }
}